//
$colorActive: #ffbb00;
//
@mixin pageInitialize() {
    * {
        padding: 0;
        border: 0;
        margin: 0;
        flex: none;
        box-sizing: border-box;
    }

    #app {
        width: 100vw;
        height: 100vh;
    }

    .app-input {
        padding-left: 4px;
        padding-right: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: #000;
        border-radius: 6px;
        display: inline-block;
        outline: 0;
        background-color: rgba(0, 0, 0, 0.34);
        line-height: 32px;
        vertical-align: middle;

        &:focus,
        &:active {
            border-color: $colorActive;
        }
    }
}

@mixin square($size) {
    width: $size;
    height: $size;
}

@mixin circle($size) {
    @include square($size);
    border-radius: 100%;
    overflow: hidden;
}

@mixin clearfix($clear: both, $display: block, $height: 0) {
    &:after {
        content: "";
        height: $height;
        display: $display;
        clear: $clear;
    }
}
